import React, { Component } from 'react';
// import echarts from 'echarts';
import ReactEcharts from 'echarts-for-react';
import { Grid } from '@alifd/next';
import { withRouter } from 'react-router-dom';
import IceContainer from '@icedesign/container';
import PageHead from '../../../../components/PageHead';
// import { getLocalTime } from '../../../../utils/localTime';
import Filter from '../chooseHead';
import Filter2 from '../chooseHead2';
import ZZ from '../ZZ';
import service from '../../../../utils/service';
import api from '../../../../utils/api';


@withRouter
export default class Body extends Component {
  constructor(props) {
    super(props);
    this.state = {
      FilterData: {
        w_id: '',
        class_id: '',
        price: '1',

      },
      FilterData2: {
        w_id: '',
        class_id: '',
        price: '1',
        Y: '',
      },
      // XNames: [], // 横坐标
      // RetailData: [], // 销售数据
      storeList: [],
      GoodsTypeList: [],
      dataSourceLine: [],
      optionLine: {},
      dataSourcePie: [],
      optionPie: {},
      typeFirst: 'pie',
    };
  }

  //  获取饼图数据
  getDate= () => {
    service({
      method: 'get',
      url: api.DataPie,
      params: this.state.FilterData,
    })
      .then((res) => {
        console.log(res);
        if (res.status === 200) {
          this.setState(
            {
              dataSourcePie: res.data,
            }, () => {
              this.SetOptionPie();
            }
          );
          // }
        }
      });
  }
  //  获取线性图数据
  getDate2= () => {
    service({
      method: 'get',
      url: api.DataLine,
      params: this.state.FilterData2,
    })
      .then((res) => {
        // console.log(res);
        if (res.status === 200) {
          this.setState(
            {
              dataSourceLine: res.data,
            }, () => {
              this.SetOptionLine();
            }
          );
        }
      });
  }
  // 获取仓库列表
getStoreList= () => {
  service({
    method: 'get',
    url: api.StoreList,
  })
    .then((res) => {
      const data = res.data.list;
      const storeList = [];
      if (data.length !== 0) {
        data.forEach((item) => {
          if (item.type != 0) {
            let obj = {};
            obj = { label: item.name, value: item.id, key: item.id };
            storeList.push(obj);
          }
        });
      }
      this.setState(
        {
          storeList,
        }
      );
    });
}
  // 获取商品类别列表
  getGoodsTypeList= () => {
    service({
      method: 'get',
      url: api.GoodsTypeFirst,
    })
      .then((res) => {
        if (res.data.code === 200) {
          const data = res.data.class_list;
          const GoodsTypeList = [];
          data.forEach((item) => {
            GoodsTypeList.push({ label: item.class_name, value: item.class_id });
          });
          this.setState(
            {
              GoodsTypeList,
            }
          );
        }
      });
  }
  // 组件挂载完毕
  componentDidMount() {
    this.getGoodsTypeList();
    this.getStoreList();
    this.getDate();
    this.getDate2();
  }

//  筛选条件改变
handleFilterChange = (value) => {
  const echarts_instance = this.echarts_react_Pie.getEchartsInstance();
  echarts_instance.clear();
  echarts_instance.showLoading();
  this.setState(
    {
      FilterData: value,
    }, () => {
      this.getDate();
    }
  );
}
//  筛选22222条件改变
handleFilterChange2 = (value) => {
  const echarts_instance = this.echarts_react_Line.getEchartsInstance();
  echarts_instance.clear();
  echarts_instance.showLoading();
  this.setState(
    {
      FilterData2: value,
      // dataSourceLine: [],
      // optionLine: [],
    }, () => {
      this.getDate2();
    }
  );
}
// 切换为柱形图：
changeToBar = () => {
  const echarts_instance = this.echarts_react_Pie.getEchartsInstance();
  echarts_instance.clear();
  echarts_instance.showLoading();
  this.setState(
    {
      typeFirst: 'bar',
    }, () => {
      this.SetOptionPie();
    }
  );
}
// 切换为饼图：
changeToPie = () => {
  const echarts_instance = this.echarts_react_Pie.getEchartsInstance();
  echarts_instance.clear();
  echarts_instance.showLoading();
  this.setState(
    {
      typeFirst: 'pie',
    }, () => {
      this.SetOptionPie();
    }
  );
}

// 线图设置
SetOptionLine = () => {
  const data = this.state.dataSourceLine;
  const { storeList, FilterData2, GoodsTypeList } = this.state;
  let title = '全部';
  let subTitle = '全部';
  storeList.forEach((item) => {
    if (item.value == FilterData2.w_id) {
      title = item.label;
    }
  });
  GoodsTypeList.forEach((item) => {
    if (item.value == FilterData2.class_id) {
      subTitle = item.label;
    }
  });
  const series = [];
  for (let i = 0; i < data.length; i++) {
    series.push({ type: 'line', seriesLayoutBy: 'row' });
  }
  const date = ['date'];
  let dataLength;
  data.forEach((item) => {
    dataLength = item.length;
  });
  for (let i = 1; i < dataLength; i++) {
    date.push(`${i}月`);
  }
  data.unshift(date);
  let option = {};
  option = {
    title: {
      text: `店铺：${title}`,
      subtext: `类别：${subTitle}`,
      // x: 'center',
    },
    tooltip: {
      trigger: 'item',
    },
    legend: { orient: 'horizontal', left: 'center', top: '10%', type: 'scroll' },
    grid: {
      left: '3%',
      right: '4%',
      // bottom: '2%',
      top: '20%',
      containLabel: true,
    },
    toolbox: {
      feature: {
        mark: { show: true },
        magicType: {
          show: true,
          type: ['line', 'funnel', 'bar'],
          title: {
            bar: '柱形图切换',
          },
        },
        restore: { show: true },
        saveAsImage: {},
      },
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
    },
    yAxis: {
      type: 'value',
    },
    dataset: {
      source: data,
    },
    series,
  };
  const echarts_instance = this.echarts_react_Line.getEchartsInstance();
  echarts_instance.hideLoading();
  echarts_instance.setOption(option);
}
// 饼图设置
SetOptionPie = () => {
  const data = this.state.dataSourcePie;
  const { storeList, FilterData, GoodsTypeList, typeFirst } = this.state;
  const changeToBar = this.changeToBar;
  const changeToPie = this.changeToPie;
  let title = '全部';
  let subTitle = '全部';
  storeList.forEach((item) => {
    if (item.value == FilterData.w_id) {
      title = item.label;
    }
  });
  GoodsTypeList.forEach((item) => {
    if (item.value == FilterData.class_id) {
      subTitle = item.label;
    }
  });
  let option = {};
  let count = 0;
  // 根据是否选择店铺，来处理数据
  // ++++++++++++++++++ 未选择店铺 +++++++++++++++++++++++++++++++
  if (FilterData.w_id === '') {
    const dataSource1 = [];
    const dataSource2 = [];
    const dataSource = [dataSource1, dataSource2];
    const series = [];
    // console.log(data);
    if (typeFirst === 'pie') {
      data.forEach((item, i) => {
        dataSource1.push({ product: item.name, value: item.count });
        if (item.class_list && item.class_list != '') {
          item.class_list.forEach((obj, index) => {
            if (i == 0) {
              dataSource2.push({ product: obj[0], value: obj[1] });
            } else {
              dataSource2[index].product = obj[0];
              dataSource2[index].value += obj[1];
            }
          });
        }
      });
      dataSource1.sort((a, b) => {
        return b[1] - a[1];
      });
      dataSource2.sort((a, b) => {
        return b[1] - a[1];
      });
      count = dataSource1.length > dataSource2.length ? dataSource1.length : dataSource2.length;
      for (let i = 0; i < dataSource.length; i++) {
        const num = 25 * ((i * 2) + 1);
        series.push({
          name: '销售统计',
          type: typeFirst,
          center: [`${num}%`, '50%'],
          radius: '68%',
          selectedMode: 'single',
          avoidLabelOverlap: false,
          labelLine: {
            length: 10,
            length2: 10,
          },
          // clockwise: false,
          // roseType: true,
          datasetIndex: i,
          label: {
            normal: {
              // formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
              formatter: (params) => {
                return (`{a|${params.name}}\n{hr|}\n{b|${this.state.FilterData.price == 0 ? '销量' : '销售额'} :} ${params.value.value} {per|(${params.percent}%)}`);
              },
              backgroundColor: '#eee',
              borderColor: '#aaa',
              borderWidth: 1,
              borderRadius: 4,
              padding: [2, 4],
              rich: {
                a: {
                  color: '#999',
                  lineHeight: 16,
                  align: 'center',
                },

                hr: {
                  borderColor: '#aaa',
                  width: '100%',
                  borderWidth: 0.5,
                  height: 0,
                },
                b: {
                  fontSize: 14,
                  lineHeight: 28,
                },
                per: {
                  color: '#eee',
                  backgroundColor: '#334455',
                  padding: [2, 4],
                  borderRadius: 2,
                },
              },
            },
          },
        });
      }
      option = {
        title: {
          text: `店铺：${title}`,
          subtext: `类别：${subTitle}`,
        },
        tooltip: {
          show: true,
          trigger: 'item',
          formatter: (params) => {
            return (`${params.name}<br/>${this.state.FilterData.price == 0 ? '销售数量' : '销售总额'} : ${params.value.value} (${params.percent}%)`);
          },
        },
        legend: { orient: 'horizontal', left: 'center', top: '7%', type: 'scroll' },
        grid: {
          left: '3%',
          right: '3%',
          bottom: '1%',
          containLabel: true,
        },
        toolbox: {
          feature: {
            mark: { show: true },
            myTool: {
              show: true,
              title: '切换柱形图',
              // icon: 'path://M928.01024 560.57856c0-8.82688-7.168-15.99488-15.99488-15.99488l-432.00512 0 0-432.57856c0-8.82688-7.168-15.99488-15.99488-15.99488-255.83616 0-463.99488 207.83104-463.99488 463.31904 0 264.88832 199.7824 464.67072 464.67072 464.67072 246.82496 0 463.31904-216.576 463.31904-463.42144zM32.01024 559.32928c0-232.50944 185.18016-422.58432 416.01024-431.04256l0 432.29184c0 8.82688 7.168 15.99488 15.99488 15.42144l431.67744 0c-9.05216 223.68256-206.56128 416.01024-431.0016 416.01024-246.66112 0-432.68096-185.97888-432.68096-432.68096zM560.00512 480.01024l447.95904 0c8.82688 0.57344 16.03584-7.168 16.03584-15.99488 0-255.83616-208.15872-463.99488-463.99488-463.99488-8.82688 0-15.99488 7.168-15.99488 15.99488l0 448.57344c0 8.82688 7.168 15.99488 15.99488 15.42144zM576 32.29696c226.01728 8.2944 408.28928 191.03744 415.80544 416.29696l-415.80544 0 0-416.29696z',
              icon: 'path://M6.7,22.9h10V48h-10V22.9zM24.9,13h10v35h-10V13zM43.2,2h10v46h-10V2zM3.1,58h53.7',
              onclick() {
                // alert('切换柱形图');
                // this.changeToBar();
                changeToBar();
              },
            },
            restore: { show: true },
            saveAsImage: {},
          },
        },
        dataset: [
          { source: dataSource1 },
          { source: dataSource2 },
        ],
        series,
      };
    } else {
      data.forEach((item, i) => {
        dataSource1.push([item.name, item.count]);
        item.class_list.forEach((obj, index) => {
          if (i == 0) {
            dataSource2.push([obj[0], obj[1]]);
          } else {
            dataSource2[index][1] += obj[1];
          }
        });
      });
      dataSource1.sort((a, b) => {
        return b[1] - a[1];
      });
      dataSource2.sort((a, b) => {
        return b[1] - a[1];
      });
      count = dataSource1.length > dataSource2.length ? dataSource1.length : dataSource2.length;
      // dataSource2.unshift(['product', `类别：${subTitle}`]);
      // dataSource1.unshift(['product', `店铺:${title}`]);
      for (let i = 0; i < dataSource.length; i++) {
        series.push({
          type: typeFirst,
          // seriesLayoutBy: 'row',
          xAxisIndex: i,
          yAxisIndex: i,
          datasetIndex: i,
          markPoint: {
            data: [
              { type: 'max', name: '最大值' },
              { type: 'min', name: '最小值' },
            ],
          },
        });
      }
      option = {
        title: {
          text: `店铺：${title}`,
          subtext: `类别：${subTitle}`,
        },
        tooltip: {
          trigger: 'item',
          formatter: (params) => {
            // console.log(params);
            if (params.componentType == 'series') {
              return (`${params.name}<br/>${this.state.FilterData.price == 0 ? '销售数量' : '销售总额'} : ${params.value[1]}`);
            }
            return (`${params.name}<br/>${this.state.FilterData.price == 0 ? '销售数量' : '销售总额'} : ${params.value}`);
          },
        },
        legend: {},
        xAxis: [
          { type: 'category', gridIndex: 0 },
          { gridIndex: 1 },

        ],
        yAxis: [
          { gridIndex: 0 },
          { type: 'category', gridIndex: 1, nameTextStyle: { width: '20', interval: '0' }, axisLabel: { rotate: '0' } },
        ],
        grid: [
          { right: '55%', top: '100px', bottom: '5%', containLabel: true },
          { left: '55%', top: '100px', bottom: '5%', containLabel: true },
        ],
        toolbox: {
          feature: {
            mark: { show: true },
            myTool: {
              show: true,
              title: '切换饼图',
              icon: 'path://M928.01024 560.57856c0-8.82688-7.168-15.99488-15.99488-15.99488l-432.00512 0 0-432.57856c0-8.82688-7.168-15.99488-15.99488-15.99488-255.83616 0-463.99488 207.83104-463.99488 463.31904 0 264.88832 199.7824 464.67072 464.67072 464.67072 246.82496 0 463.31904-216.576 463.31904-463.42144zM32.01024 559.32928c0-232.50944 185.18016-422.58432 416.01024-431.04256l0 432.29184c0 8.82688 7.168 15.99488 15.99488 15.42144l431.67744 0c-9.05216 223.68256-206.56128 416.01024-431.0016 416.01024-246.66112 0-432.68096-185.97888-432.68096-432.68096zM560.00512 480.01024l447.95904 0c8.82688 0.57344 16.03584-7.168 16.03584-15.99488 0-255.83616-208.15872-463.99488-463.99488-463.99488-8.82688 0-15.99488 7.168-15.99488 15.99488l0 448.57344c0 8.82688 7.168 15.99488 15.99488 15.42144zM576 32.29696c226.01728 8.2944 408.28928 191.03744 415.80544 416.29696l-415.80544 0 0-416.29696z',
              // icon: 'path://M6.7,22.9h10V48h-10V22.9zM24.9,13h10v35h-10V13zM43.2,2h10v46h-10V2zM3.1,58h53.7',
              onclick() {
                // alert('切换柱形图');
                // this.changeToBar();
                changeToPie();
              },
            },
            //   magicType: {
            //     type: ['line', 'bar', 'stack', 'tiled']
            // },
            restore: { show: true },
            saveAsImage: {},
          },
        },
        dataset: [
          { source: dataSource1 },
          { source: dataSource2 },
        ],
        series,
      };
    }
  }
  //  ++++++++++++++++++++ 选择店铺 ++++++++++++++++++
  //  选中店铺的饼图
  else if (typeFirst === 'pie') {
    const dataSource1 = [];
    data.forEach((item, i) => {
      dataSource1.push({ product: item[0], value: item[1] });
    });
    const dataSource = dataSource1;
    dataSource.sort((a, b) => {
      return b[1] - a[1];
    });
    count = dataSource.length;
    const series = [{
      type: 'pie',
      center: ['50%', '50%'],
      radius: '68%',
      selectedMode: 'single',
      avoidLabelOverlap: false,
      labelLine: {
        length: 10,
        length2: 10,
      },
      label: {
        normal: {
          // formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
          formatter: (params) => {
            return (`{a|${params.name}}\n{hr|}\n{b|${this.state.FilterData.price == 0 ? '销量' : '销售额'} :} ${params.value.value} {per|(${params.percent}%)}`);
          },
          backgroundColor: '#eee',
          borderColor: '#aaa',
          borderWidth: 1,
          borderRadius: 4,
          padding: [2, 4],
          rich: {
            a: {
              color: '#999',
              lineHeight: 16,
              align: 'center',
            },

            hr: {
              borderColor: '#aaa',
              width: '100%',
              borderWidth: 0.5,
              height: 0,
            },
            b: {
              fontSize: 14,
              lineHeight: 28,
            },
            per: {
              color: '#eee',
              backgroundColor: '#334455',
              padding: [2, 4],
              borderRadius: 2,
            },
          },
        },
      },
    }];
    option = {
      title: {
        text: `店铺：${title}`,
        subtext: `类别：${subTitle}`,
      },
      tooltip: {
        trigger: 'item',
        formatter: (params) => {
          return (`${params.name}<br/>${this.state.FilterData.price == 0 ? '销售数量' : '销售总额'}  : ${params.value.value} (${params.percent}%)`);
        },
      },
      legend: { orient: 'vertical', left: 'left', top: '10%', type: 'scroll' },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
      },
      toolbox: {
        feature: {
          myTool: {
            show: true,
            title: '切换柱形图',
            // icon: 'path://M928.01024 560.57856c0-8.82688-7.168-15.99488-15.99488-15.99488l-432.00512 0 0-432.57856c0-8.82688-7.168-15.99488-15.99488-15.99488-255.83616 0-463.99488 207.83104-463.99488 463.31904 0 264.88832 199.7824 464.67072 464.67072 464.67072 246.82496 0 463.31904-216.576 463.31904-463.42144zM32.01024 559.32928c0-232.50944 185.18016-422.58432 416.01024-431.04256l0 432.29184c0 8.82688 7.168 15.99488 15.99488 15.42144l431.67744 0c-9.05216 223.68256-206.56128 416.01024-431.0016 416.01024-246.66112 0-432.68096-185.97888-432.68096-432.68096zM560.00512 480.01024l447.95904 0c8.82688 0.57344 16.03584-7.168 16.03584-15.99488 0-255.83616-208.15872-463.99488-463.99488-463.99488-8.82688 0-15.99488 7.168-15.99488 15.99488l0 448.57344c0 8.82688 7.168 15.99488 15.99488 15.42144zM576 32.29696c226.01728 8.2944 408.28928 191.03744 415.80544 416.29696l-415.80544 0 0-416.29696z',
            icon: 'path://M6.7,22.9h10V48h-10V22.9zM24.9,13h10v35h-10V13zM43.2,2h10v46h-10V2zM3.1,58h53.7',
            onclick() {
              // alert('切换柱形图');
              // this.changeToBar();
              changeToBar();
            },
          },
          restore: { show: true },
          saveAsImage: {},
        },
      },
      dataset: [
        { source: dataSource },
      ],
      series,
    };
  }
  // 选选中店铺的柱形图
  else {
    const dataSource1 = [];
    data.forEach((item, i) => {
      dataSource1.push([item[0], item[1]]);
    });
    const dataSource = dataSource1;
    dataSource.sort((a, b) => {
      return b[1] - a[1];
    });
    count = dataSource.length;
    const series = {
      type: typeFirst,
      // seriesLayoutBy: 'row',
      // xAxisIndex: i,
      // yAxisIndex: i,
      // datasetIndex: i,
      markPoint: {
        trigger: 'item',
        data: [
          { type: 'max', name: '最大值' },
          { type: 'min', name: '最小值' },
        ],
      },

    };
    option = {
      title: {
        text: `店铺：${title}`,
        subtext: `类别：${subTitle}`,
      },
      tooltip: {
        trigger: 'item',
        formatter: (params) => {
          if (params.componentType == 'series') {
            return (`${params.name}<br/>${this.state.FilterData.price == 0 ? '销售数量' : '销售总额'} : ${params.value[1]}`);
          }
          return (`${params.name}<br/>${this.state.FilterData.price == 0 ? '销售数量' : '销售总额'} : ${params.value}`);
        },
      },
      legend: {},
      grid: {
        left: '3%',
        right: '4%',
        top: '100px',
        containLabel: true,
      },
      toolbox: {
        feature: {
          myTool: {
            show: true,
            title: '切换饼图',
            icon: 'path://M928.01024 560.57856c0-8.82688-7.168-15.99488-15.99488-15.99488l-432.00512 0 0-432.57856c0-8.82688-7.168-15.99488-15.99488-15.99488-255.83616 0-463.99488 207.83104-463.99488 463.31904 0 264.88832 199.7824 464.67072 464.67072 464.67072 246.82496 0 463.31904-216.576 463.31904-463.42144zM32.01024 559.32928c0-232.50944 185.18016-422.58432 416.01024-431.04256l0 432.29184c0 8.82688 7.168 15.99488 15.99488 15.42144l431.67744 0c-9.05216 223.68256-206.56128 416.01024-431.0016 416.01024-246.66112 0-432.68096-185.97888-432.68096-432.68096zM560.00512 480.01024l447.95904 0c8.82688 0.57344 16.03584-7.168 16.03584-15.99488 0-255.83616-208.15872-463.99488-463.99488-463.99488-8.82688 0-15.99488 7.168-15.99488 15.99488l0 448.57344c0 8.82688 7.168 15.99488 15.99488 15.42144zM576 32.29696c226.01728 8.2944 408.28928 191.03744 415.80544 416.29696l-415.80544 0 0-416.29696z',
            // icon: 'path://M6.7,22.9h10V48h-10V22.9zM24.9,13h10v35h-10V13zM43.2,2h10v46h-10V2zM3.1,58h53.7',
            onclick() {
              // alert('切换柱形图');
              // this.changeToBar();
              changeToPie();
            },
          },
          restore: { show: true },
          saveAsImage: {},
        },
      },
      // xAxis: { type: 'category', nameTextStyle: { width: '20', interval: '0' }, axisLabel: { rotate: '-90' } },
      yAxis: { type: 'category', nameTextStyle: { width: '20', interval: '0' }, axisLabel: { rotate: '0' } },
      xAxis: { },
      dataset: {
        source: dataSource,
      },
      series,
    };
  }
  const echarts_instance = this.echarts_react_Pie.getEchartsInstance();
  echarts_instance.hideLoading();
  echarts_instance.setOption(option);
  if (this.state.typeFirst === 'pie') {
    this.autoHeight = 800;
  } else {
    this.autoHeight = (count * 35) + 50 > 800 ? (count * 35) + 50 : 800; // counst.length为柱状图的条数，即数据长度。35为我给每个柱状图的高度，50为柱状图x轴内容的高度(大概的)。
  }

  echarts_instance.getDom().style.height = `${this.autoHeight}px`;
  echarts_instance.getDom().childNodes[0].style.height = `${this.autoHeight}px`;
  echarts_instance.getDom().childNodes[0].childNodes[0].setAttribute('height', this.autoHeight);
  echarts_instance.getDom().childNodes[0].childNodes[0].style.height = `${this.autoHeight}px`;
  echarts_instance.resize();
  // console.log(echarts_instance.getHeight());
}
render() {
  const { GoodsTypeList, storeList, optionLine, optionPie } = this.state;
  return (
    <div style={styles.container}>
      <PageHead title="总体统计" />
      <IceContainer>
        <Filter onChange={this.handleFilterChange} storeList={storeList} GoodsTypeList={GoodsTypeList} />
        <ReactEcharts
          option={optionPie}
          style={{ width: '100%', margin: '20px 0' }}
          theme="light"
          ref={(e) => { this.echarts_react_Pie = e; }}
        />
      </IceContainer>
      <PageHead title="销售趋势" />
      <IceContainer>
        <Filter2 onChange={this.handleFilterChange2} storeList={storeList} GoodsTypeList={GoodsTypeList} />
        <ReactEcharts
          option={optionLine}
          style={{ width: '100%', margin: '20px 0', height: '600px' }}
          theme="light"
          ref={(e) => { this.echarts_react_Line = e; }}
        />
      </IceContainer>
      <ZZ storeList={storeList} GoodsTypeList={GoodsTypeList} />
    </div>
  );
}
}

const styles = {
  container: {
    padding: '0 0px 20px',
  },
  upload: {
    float: 'right',
    color: '#fff',
    backgroundImage: 'linear-gradient(90deg, #FFA20D 0%, #FF6E02 100%)',
    boxShadow: '0 -2px 6px 0 rgba(255,110,2,0.30)',
    borderRadius: '20px 20px 0 0',
    width: '124px',
    height: '40px',
    cursor: 'pointer',
    border: 'none',
    icon: {
      cursor: 'pointer',
      fontSize: '16px',
      textAlign: 'left',
      lineHeight: '22px',
    },
  },
};
